<template>
	<el-form ref="invitation" :model="invitation"  :rules="rules2" class="post-form">
		<h3>请输入借贷产品名称</h3>
		<el-form-item prop="title">
			<el-input v-model="invitation.title" prop="title" placeholder="请输入借贷产品名称"></el-input>
		</el-form-item>
		<h3>请输入内容</h3>
		<el-form-item prop="content">
			<el-input v-model="invitation.content" prop="content" type="hidden" style="display: none;" :readonly="true"></el-input>
			<mavon-editor :autofocus="false" ref="md" v-model="invitation.content" @change="getMdHtml" :toolbars="toolbars" />
		</el-form-item>
		<h3>请输入新产品相关参数</h3>
		<el-form ref="query" :model="query" :rules="rules" label-width="120px" class="condition-query-form">
			<el-form-item label="贷款金额" prop="loanAmnt">
				<el-input v-model.number="query.loanAmnt" @input="form2CheckInput" @blur="checkBlur()">
					<template slot="append">元</template>
				</el-input>
			</el-form-item>
			<el-form-item label="贷款分期">
				<el-input v-model.number="query.term" prop="term" @input="form2CheckInput" @blur="checkBlur()">
					<template slot="append">期</template>
				</el-input>
			</el-form-item>
			<el-form-item label="贷款利率">
				<el-input v-model="query.interestRate" prop="interestRate" @input="form2CheckInput" @blur="checkBlur()">
					<template slot="append">%</template>
				</el-input>
			</el-form-item>
			<el-form-item label="分期付款金额">
				<el-input v-model="query.installment" :readonly="true" prop="installment" @input="form2CheckInput"
					@blur="checkBlur()">
					<template slot="append">元</template>
				</el-input>
			</el-form-item>
		</el-form>
		<el-form-item>
			<el-button @click="addInvitation">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import lendingProduct from '@/api/lendingProduct'
export default {
	data() {
		return {
			role: this.$store.getters.roles,
			invitation: {
				title: '',
				content: '',
				picture: '',
				state: 1,
				extra: ''
			},
			query: {
				loanAmnt: 0,
				term: 0,
				interestRate: 0,
				installment: 0,
				employmentLength: 0
			},
			toolbars: {
				bold: true, // 粗体
				italic: true, // 斜体
				header: true, // 标题
				underline: true, // 下划线
				strikethrough: true, // 中划线
				mark: true, // 标记
				superscript: true, // 上角标
				subscript: true, // 下角标
				quote: true, // 引用
				ol: true, // 有序列表
				ul: true, // 无序列表
				link: true, // 链接
				imagelink: true, // 图片链接
				code: true, // code
				table: true, // 表格
				fullscreen: true, // 全屏编辑
				readmodel: true, // 沉浸式阅读
				htmlcode: true, // 展示html源码
				help: true, // 帮助
				/* 1.3.5 */
				undo: true, // 上一步
				redo: true, // 下一步
				trash: true, // 清空
				save: false, // 保存（触发events中的save事件）
				/* 1.4.2 */
				navigation: true, // 导航目录
				/* 2.1.8 */
				alignleft: true, // 左对齐
				aligncenter: true, // 居中
				alignright: true, // 右对齐
				/* 2.2.1 */
				subfield: true, // 单双栏模式
				preview: true // 预览
			},
			mdContent: "",
			htmlContent: "",
			BASE_API1: 'http://localhost:9000',
			rules2: {
				title: [
					{ required: true, message: '请输入公告标题', trigger: 'change' },
					{ min: 3, message: '公告标题至少需要3个字符', trigger: 'change' }
				],
				content: [
					{ required: true, message: '请输入公告内容', trigger: 'change' },
					{ min: 3, message: '公内容至少需要3个字符', trigger: 'change' }
				]
			},
			rules: {
				loanAmnt: [
					{ type: 'number', message: '贷款金额应为数字', trigger: 'change' },
					{ pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '贷款金额应大于0', trigger: 'change' }
				],
				term: [
					{ type: 'number', message: '贷款期限应为数字', trigger: 'change' },
					{ pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '贷款期限应大于0', trigger: 'change' }
				],
				interestRate: [
					{ pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '贷款利率应大于0', trigger: 'change' }
				],
				installment: [
					{ pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '付款金额应大于0', trigger: 'change' }
				],
			}
		}
	},
	methods: {
		getMdHtml(mdContent, htmlContent) {//参数1：md语法内容，参数2：html语法内容
			this.htmlContent = htmlContent
		},
		addInvitation() {
			this.$refs.invitation.validate((valid) => {
				if (valid) {
					this.$refs.query.validate((valid) => {
						if (valid) {
							this.invitation.content = this.htmlContent
							this.invitation.extra = JSON.stringify(this.query);
							lendingProduct.add(this.invitation)
								.then(response => {
									this.invitation.title = ''
									this.invitation.content = ''
									this.$router.push({ path: '/lendng-product/history' })
								})
						} else {
							return false;
						}
					})
				} else {
					return false;
				}
			})
		},
		form2CheckInput() {
			try {
				if (this.query.loanAmnt != 0 && this.query.interestRate != 0 && this.query.term != 0) {
					this.query.installment = parseFloat((this.query.loanAmnt * (1 + this.query.interestRate / 100)) / this.query.term).toFixed(2)
				}
				this.$refs.query.validate()
			}
			catch (_) {
			}

		},
		checkBlur() {
		},
	}
}
</script>
<style lang="scss">
.post-form {
	padding-left: 10%;
	padding-right: 10%;
}

.condition-query-form {
	padding-left: 5%;

	h3 {
		padding-left: 140px;
	}

	.el-input {
		max-width: 200px;
	}
}
</style>
